<template>
<!--详页左侧店铺-->
  <div class="store_info">
    <div class="store_title">
      <span class="tip">店铺</span>
      <span class="title">店铺名称</span>
    </div>
    <div class="rate">
      <span style="padding-top:2px;margin-right:10px">综合评分</span>
      <el-rate class="rate_class"   score-template="5 分" text-color="#F7BA2A" show-score disabled />
      <div class="clear"></div>
    </div>
    <div class="store_rate">
      <div class="title">店铺评分：</div>
      <div class="item">
        <span style="float:left;padding-top:2px;margin-right:10px;line-height:32px">描述相符</span>
        <el-rate class="rate_class other"  score-template="'3分" text-color="#F7BA2A" show-score disabled />
        <div class="clear"></div>
      </div>
      <div class="item">
        <span style="float:left;padding-top:2px;margin-right:10px;line-height:32px">服务态度</span>
        <el-rate class="rate_class other" score-template="5分" text-color="#F7BA2A" show-score disabled />
        <div class="clear"></div>
      </div>
      <div class="item">
        <span style="float:left;padding-top:2px;margin-right:10px;line-height:32px">发货速度</span>
        <el-rate class="rate_class other"  score-template="5 分" text-color="#F7BA2A" show-score  disabled />
        <div class="clear"></div>
      </div>
    </div>
    <div class="store_com" style="margin-top:10px">公司名称：<em style="color:#999">张三公司</em></div>
    <div class="store_com" style="margin-bottom:10px">公司地址：<em style="color:#999">小桥流水人家</em></div>
    <div class="btn">
      <span class="navstore" >进入店铺</span>
      <span class="contact" >联系客服</span>
      <div class="clear"></div>
    </div>
  </div>
  <!-- // 销售排行 -->
  <div class="store_info">
    <div class="store_title"><span class="title">销售排行</span></div>
  <!--商品列表-->
    <Ranking :order-sort="'new'" />
  </div>
</template>
<script setup lang="ts">

import Ranking from '@/views/goods/components/Ranking.vue'
</script>
<style scoped lang="scss">
.store_info{
  width: 100%;
  border:1px solid #efefef;
  margin-bottom: 20px;
  .btn{
    border-top: 1px solid #efefef;
    span:hover{
      background: #ca151e;
      color:#fff;
    }
    span{
      text-align: center;
      width: 50%;
      box-sizing: border-box;
      height: 40px;
      line-height: 40px;
      display: block;
      float: left;
      cursor: pointer;
      &:first-child{
        border-right: 1px solid #efefef;
      }
    }
  }
  .store_com{
    padding:3px 10px;
  }
  .store_rate{
    padding-left:10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #efefef;
    .item{
      // line-height: 20px;
    }
    .title{
      color:#000;
      line-height: 35px;
    }
  }
  .rate{
    font-size: 14px;
    display: flex;
    align-items: center;
    padding-left:10px;
    border-bottom: 1px solid #efefef;
  }
  .store_title{
    background: #fafafa;
    height: 35px;
    padding:0 10px;
    padding-top: 6px;
    box-sizing: border-box;
    border-bottom: 1px solid #efefef;
    .tip{
      background: #ca151e;
      color:#fff;
      text-align: center;
      line-height: 24px;
      border-radius: 3px;
      margin-right: 10px;
      padding:2px 10px;
    }
    .title{
      color:#000;
    }
  }
}
</style>